<template>
  <div class="movie-detail">
    <div class="header" ref="bgc">
      <van-nav-bar
        title="电影"
        left-arrow
        @click-left="back"
        @click-right="showShare = true"
        ref="bgc"
      >
        <template #right>
          <van-icon name="share" color="#fff" size="20" />
        </template>
      </van-nav-bar>
    </div>

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />

    <div class="container" ref="bgc">
      <!-- <div class="container" v-for="(infoItem,index) in movieInfos" :key="index"> -->
      <div class="movie-info clear">
        <div class="cover fl" >
          <a @click="toWatchVideo(movieInfos.videourl)">
            <img class="auto-img cover-img" :src="movieInfos.img" alt="" />
            <img
              class="auto-img poster-play"
              src="../assets/poster-play.png"
              alt=""
            />
          </a>
        </div>
        <div class="infos fl">
          <div class="title one-text">{{ movieInfos.nm }}</div>
          <div class="info-box">
            <div class="enname one-text">
              {{ movieInfos.enm }}
            </div>
            <div class="type one-text">{{ movieInfos.cat }}</div>
            <div class="actors one-text">{{ movieInfos.star }}</div>
            <div class="time">
              <span class="shown">{{ movieInfos.pubDesc }}</span>
              /
              <span class="duration">{{ movieInfos.dur }}分钟</span>
            </div>
          </div>

          <div class="buttons">
            <button class="wish-btn">
              <span>想看</span>
            </button>
            <button class="visited-btn">
              <span>看过</span>
            </button>
          </div>
        </div>
      </div>
      <div class="wish-level">
        <div class="top-title">
          <div class="logo">
            <img class="auto-img" src="../assets/logo-new.png" alt="" />
          </div>
          <span class="title">猫眼想看</span>
        </div>
        <div class="top-content">
          <div class="wish-num">
            <span class="num">{{ movieInfos.wish }}</span>
            人想看
          </div>
          <div class="level">
            <div class="level-left">
              <div class="top">TOP</div>
              <div class="top-num">{{ movieInfos.showst }}</div>
            </div>
            <div class="level-right">
              <div class="current">近期</div>
              <div class="current-txt">最受期待榜</div>
            </div>
          </div>
        </div>
      </div>
      <div class="introduction-box">
        <div class="intro-top">
          <div class="intro-title">简介</div>
          <div class="intro-more" v-show="!viewAll" @click="add">
            展开
            <van-icon name="arrow-down" color="#fff" />
          </div>

          <div class="intro-more" v-show="viewAll" @click="add">
            收起
            <van-icon name="arrow-up" color="#fff" />
          </div>

        </div>
        <p :class="[viewAll === true ? 'allContent' : 'introContent']">
          {{ movieInfos.dra }}
        </p>
      </div>
      <div class="actors-box">
        <div class="actors-top">
          <div class="actors-title">演职人员</div>
          <div class="view-all">
            全部
            <van-icon name="arrow" color="#fff" />
          </div>
        </div>
        <div class="actors-list">
          <ul>
            <li
              class="actor-item"
              v-for="(actorItem, index) in actorsData"
              :key="index"
            >
              <a href="#">
                <img :src="actorItem.avatar | setWH(80.112)" alt="" />
                <span class="name one-text">{{ actorItem.cnm }}</span>
                <span class="role one-text">{{ actorItem.desc }}</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="recom-box">
        <div class="recom-top">
          <div class="recom-title">视频推荐</div>
          <div class="view-all">
            全部
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="recom-list">
          <ul>
            <li
              class="recom-item"
              v-for="(videoItem, index) in videoData"
              :key="index"
            >
              <a href="#">
                <img
                  :src="videoItem.video.imgUrl"
                  alt=""
                  @click="toWatchVideo(videoItem.video.url)"
                />
                <div class="play" @click="toWatchVideo(videoItem.video.url)">
                  <van-icon name="play" size="20" color="#000" />
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="still-box">
        <div class="still-top">
          <div class="still-title">剧照</div>
          <div class="view-all">
            全部
            <!-- 67张 -->
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="still-list">
          <ul>
            <!-- <li class="still-item"> -->
            <li
              class="still-item"
              v-for="(picItem, index) in this.movieInfos.photos"
              :key="index"
            >
              <a href="#">
                <img :src="picItem | setWH(140.93)" alt="" />
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="comment-box">
      <van-tabs v-model="active" scrollspy sticky offset-top="46">
        <van-tab title="评论">
          <div class="comment-list">
            <div class="comment-top">
              <div class="comment-title">观众热评</div>
              <button class="publish-btn">发布评论</button>
            </div>
            <div class="comments">
              <div
                class="comment-item clearfix"
                v-for="(commentItem, index) in commentList"
                :key="index"
              >
                <div class="avatar fl">
                  <img :src="commentItem.avatarUrl" alt="" class="auto-img" />
                </div>
                <div class="right fl">
                  <div class="right-top">
                    <div class="title-container">
                      <div class="name-box">
                        <div class="nickName">{{ commentItem.nick }}</div>
                        <van-tag round type="primary" plain class="level"
                          >Lv{{ commentItem.userLevel }}</van-tag
                        >
                      </div>
                      <div class="comment-star">
                        <div class="star-wrap">
                          <van-rate v-model="value" readonly color="#ffd21e" />
                          <span class="star-score">{{
                            commentItem.score
                          }}</span>
                          <span class="star-word">分</span>
                        </div>
                        <div class="buy-ticket">购票</div>
                      </div>
                    </div>
                    <div class="title-appove" @click="commentItem.upCount += 1">
                      <img
                        class="zan-icon"
                        src="../assets/video-praise.png"
                        alt=""
                      />
                      <span class="zan-num">{{ commentItem.upCount }}</span>
                    </div>
                  </div>
                  <div class="right-middle">
                    <div class="middle-content">
                      {{ commentItem.content }}
                    </div>
                  </div>
                  <div class="right-bottom">
                    <div class="time">{{ commentItem.time }}</div>
                    <div class="reply">
                      <span>{{ commentItem.replyCount }}</span
                      >回复
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="comment-bottom">
              查看全部评论
              <van-icon name="arrow" />
            </div>
          </div>
        </van-tab>

        <van-tab title="问答">
          <div class="q-a">
            <div class="qa-top">
              <div class="qa-top-title fl">猫眼问答</div>
              <button class="ask-btn fr">我要提问</button>
            </div>
            <div class="qa-box">
              <div
                class="qa-item"
                v-for="(qaItem, index) in qaData"
                :key="index"
              >
                <div class="q-conent two-text">
                  {{ qaItem.question.content }}
                </div>
                <div class="ans-num">{{ qaItem.question.answerCnt }}个回答</div>
                <div
                  class="ans-content one-text"
                  v-if="qaItem.question.answerCnt != 0"
                >
                  {{ qaItem.answer.content }}
                </div>
              </div>
            </div>
            <div class="qa-bottom">
              查看全部问答
              <van-icon name="arrow" />
            </div>
          </div>
        </van-tab>

        <van-tab title="详细信息">
          <div class="detail-box">
            <div class="detail-info-title">影片资料</div>
            <div class="detail-items">
              <div
                class="detail-item"
                v-for="(detailItem, index) in detailData"
                :key="index"
              >
                <div class="item-top">
                  <div class="icon">
                    <img class="auto-img" :src="detailItem.img" alt="" />
                  </div>
                  <div class="item-title">{{ detailItem.title }}</div>
                </div>
                <div class="item-content one-text">
                  {{ detailItem.content }}
                </div>
              </div>
            </div>
          </div>
        </van-tab>

        <van-tab title="推荐">
          <div class="recommend-box">
            <div class="news-box">
              <div class="news-top clearfix">
                <div class="news-title fl">相关快讯</div>
                <div class="view-all fr">
                  全部
                  <van-icon name="arrow" />
                </div>
              </div>
              <div class="news-items">
                <div
                  class="news-item"
                  v-for="(newsItem, index) in newsData"
                  :key="index"
                  
                >
                  <div class="news-item-top clearfix">
                    <div class="news-content fl">
                      {{ newsItem.title }}
                    </div>
                    <div class="cover fr">
                      <img
                        class="auto-img"
                        :src="newsItem.previewImages[0].url"
                        alt=""
                      />
                    </div>
                  </div>
                  <div class="news-item-bottom">
                    <div>
                      <span class="author">{{ newsItem.source }}</span>
                      <span class="time">{{ newsItem.created }}</span>
                    </div>
                    <div class="right">
                      <van-icon name="eye-o" />
                      <span class="read">{{ newsItem.viewCount }}</span>

                      <van-icon name="comment-o" />
                      <div class="comment-num">{{ newsItem.commentCount }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="recommend-films">
              <div class="recomment-title">喜欢这部影片的人也喜欢</div>
              <div class="recomment-box">
                <div
                  class="recomment-item"
                  v-for="(relateItem, index) in relateData"
                  :key="index"
                  @click="movieDeatil(relateItem.id)"
                >
                  <div class="pic">
                    <img :src="relateItem.img" alt="" class="auto-img" />
                    <div class="score">
                      <span class="num"
                        >{{ relateItem.sc ? relateItem.sc : "暂无评" }}分</span
                      >
                      <!-- <span class="num" v-else-if="relateItem.sc=0">暂无评分</span> -->
                    </div>
                  </div>
                  <div class="title one-text">{{ relateItem.title }}</div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="statement-box">
      <p>
        影视行业信息
        <a href="#">《免责声明》</a>
        | 违法和不良信息举报电话： 400601890
      </p>
    </div>

    <div class="bottom">
      <van-button
        type="primary"
        block
        color="linear-gradient(to right, #fb3333, #ff5269)"
        round
        @click="goSelectSeat"
      >
        特惠购票
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "MovieDetail",
  data() {
    return {
      value: 8,
      active: 0,
      movieId: "",
      // 影片基本数据
      movieInfos: [],
      // 影片剧照数据
      photos: [],
      // 演员数据
      actorsData: [],
      // 视频推荐数据
      videoData: [],
      // 评论列表
      commentList: [],
      qaData: [],
      detailData: [],
      newsData: [],
      relateData: [],
      bg: "",
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      viewAll:false
    };
  },
  components: {
    // Navi,
  },
  filter: {},
  created() {
    this.movieId = this.$route.params.movieId;

    this.getMovieDetail(this.movieId);
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    clickRight() {
      this.$emit("click-right");
    },
    // 根据影片movieId获取影片详情
    getMovieDetail(movieId) {
      this.axios({
        method: "get",
        url: "/movie/detail",
        params: {
          movieid: movieId,
        },
      })
        .then((result) => {
          // 获取电影基本信息
          this.movieInfos = result.data.movie;
          //

          let img = this.movieInfos.photos;
          this.movieInfos.photos = { ...img };
          //

          // 获取演职人员数据
          this.actorsData = result.data.celebrities;
          //

          // 获取视频推荐数据
          this.videoData = result.data.feedVideos.feeds;
          // 

          // 获取评论列表数据
          this.commentList = result.data.comments.hotComments;
          //

          for (let i = 0; i < this.commentList.length; i++) {
            let time = this.commentList[i].time;
            //

            let date = new Date(time);
            //
            let y = date.getFullYear() + "-";
            let mo =
              (date.getMonth() + 1 < 10
                ? "0" + (date.getMonth() + 1)
                : date.getMonth() + 1) + "-";
            let d =
              (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
              " ";
            let h =
              (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
              ":";
            let mi =
              (date.getMinutes() < 10
                ? "0" + date.getMinutes()
                : date.getMinutes()) + ":";
            let s =
              (date.getSeconds() < 10
                ? "0" + date.getSeconds()
                : date.getSeconds()) + "";
            let newTime = y + mo + d + h + mi + s;
            //
            this.commentList[i].time = newTime.substring(5, 10);
            //
          }

          // 获取问答数据
          this.qaData = result.data.questions.questions;
          //

          // 获取电影详细详细数据
          this.detailData = result.data.features;
          //

          // 获取相关快讯数据
          this.newsData = result.data.newsList.newsList;
          //
          for (let i = 0; i < this.newsData.length; i++) {
            let time = this.newsData[i].created;
            //

            let date = new Date(time);
            //
            let y = date.getFullYear() + "-";
            let mo =
              (date.getMonth() + 1 < 10
                ? "0" + (date.getMonth() + 1)
                : date.getMonth() + 1) + "-";
            let d =
              (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
              " ";
            let h =
              (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
              ":";
            let mi =
              (date.getMinutes() < 10
                ? "0" + date.getMinutes()
                : date.getMinutes()) + ":";
            let s =
              (date.getSeconds() < 10
                ? "0" + date.getSeconds()
                : date.getSeconds()) + "";
            let newTime = y + mo + d + h + mi + s;
            //
            this.newsData[i].created = newTime.substring(5, 10);
            //
          }

          // 获取相关影片数据
          this.relateData = result.data.relatedMovies;
          //

          // 获取背景颜色数据
          this.bg = result.data.movie.backgroundColor;
          //
          this.$nextTick(()=>{
            
            
          })
        })
        .catch((err) => {});
    },

    // 点击分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },

    toWatchVideo(url) {
      this.$router.push({ name: "WatchVideo", query: { video: url } });
    },

    // 点击跳转到影片详情
    movieDeatil(movieId) {
      // 获取点击的影片id

      this.$router.push({ name: "MovieDetail", params: { movieId } });
    },

    add(){
      this.viewAll = !this.viewAll;
    },

    // 前往选座页面
    goSelectSeat(){
      this.$router.push({name:'SelectSeat'});
    }
  },
};
</script>

<style lang="less" scoped>
.movie-detail {
  background-color: #f5f5f5;
  margin-bottom: 65px;
}
.header {
  width: 100%;
  height: 46px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  /deep/.van-nav-bar__content {
    // border: 1px solid red;
    // background-color: #1a1c40;
    background-color:  #dd403b;
  }
  /deep/ .van-hairline--bottom::after {
    content: "";
    width: 0;
    height: 0;
    border-bottom: none;
  }
  /deep/ .van-nav-bar__arrow {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
    font-size: 19px;
  }
}
.container {
  // border: 1px solid red;
  padding: 12px;
  padding-bottom: 30px;
  background-color: #1a1c40;
  margin-top: 46px;
  color: #fff;

  .movie-info {
    .cover {
      width: 100px;
      height: 138px;
      background-color: #eee;
      position: relative;
      .cover-img{
        height: 138px;
      }
      .poster-play {
        // border: 1px solid red;
        width: 30px;
        height: 30px;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    .infos {
      // border: 1px solid #000;
      width: 231px;
      margin-left: 10px;
      .title {
        font-size: 20px;
        font-weight: bold;
        color: #fff;
      }
      .info-box {
        font-size: 12px;
        color: #fff;
        margin-top: 10px;
        // background-color: #ccc;
        div {
          padding-bottom: 4px;
        }
      }
      .buttons {
        button {
          width: 110px;
          height: 32px;
          margin-right: 10px;
          border-radius: 6px;
          background-color: #6a6b83;

          &:last-child {
            margin-right: 0;
          }
          span {
            color: #fff;
            font-size: 14px;
            margin-left: 16px;
          }
        }
        .wish-btn {
          background-image: url("../assets/want-to-watch.png");
          background-repeat: no-repeat;
          background-size: 15px;
          background-position: 28px 9px;
        }
        .visited-btn {
          background-image: url("../assets/star.png");
          background-repeat: no-repeat;
          background-size: 15px;
          background-position: 28px 9px;
        }
      }
    }
  }
  .wish-level {
    // border: 1px solid #0f0;
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 16px;
    margin-top: 170px;
    padding: 9px 10px 20px;
    .top-title {
      display: flex;
      align-items: center;
      .logo {
        width: 16px;
        height: 16px;
      }
      .title {
        margin-left: 5px;
      }
    }

    .top-content {
      display: flex;
      // align-items: center;
      padding-top: 11px;

      .wish-num {
        flex: 1;
        font-size: 12px;
        .num {
          font-size: 26px;
          font-weight: bolder;
          color: #ffb400;
          padding-left: 16px;
        }
      }
      .level {
        border: 1px solid #b49c50;
        width: 121px;
        height: 45px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        .level-left {
          // background-color: #ccc;
          padding: 8px;
          width: 30px;
          height: 30px;
          text-align: center;
          color: #ffe186;
          .top {
            // background-color: #fff;
            font-size: 14px;
            font-weight: bolder;
            margin-top: -2px;
          }
          .top-num {
            font-size: 18px;
          }
        }
        .level-right {
          margin-left: 1px;
          .current {
            color: #ffeec1;
            opacity: 0.7;
            font-weight: 400;
            margin-top: -2px;
          }
          .current-txt {
            padding-top: 2px;
            color: #fff4bd;
            font-size: 13px;
          }
        }
      }
    }
  }
  .introduction-box {
    // border: 1px solid #0f0;
    margin-top: 14px;
    .intro-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .intro-title {
        font-size: 15px;
      }
    }
    .introContent {
      margin-top: 10px;
      font-size: 15px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .allContent{
      margin-top: 10px;
      font-size: 15px;
    }
  }
  .actors-box {
    margin-top: 12px;
    .actors-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .actors-title {
        font-size: 15px;
      }
    }
    .actors-list {
      overflow-x: auto;
      margin-top: 10px;
      ul {
        display: flex;
        .actor-item {
          // border: 1px solid #0f0;
          width: 80px;
          margin-right: 12px;
          flex: none;
          text-align: center;
          &:last-child {
            margin-right: 0;
          }
          img {
            height: 112px;
          }
          .name {
            color: #fff;
            display: block;
          }
          .role {
            color: #fff;
            opacity: 0.4;
            display: block;
          }
        }
      }
    }
  }
  .recom-box {
    margin-top: 14px;
    .recom-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .recom-title {
        font-size: 15px;
      }
    }
    .recom-list {
      overflow-x: auto;
      margin-top: 10px;
      ul {
        display: flex;
        .recom-item {
          width: 140px;
          margin-right: 8px;
          flex: none;
          border-radius: 8px;
          position: relative;
          &:last-child {
            margin-right: 0;
          }
          img {
            width: 100%;
            height: 93px;
            border-radius: 8px;
          }
          .play {
            width: 32px;
            height: 32px;
            background-color: #fff;
            opacity: 0.8;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -18px;
            margin-top: -18px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
  .still-box {
    margin-top: 14px;
    .still-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .still-title {
        font-size: 15px;
      }
    }
    .still-list {
      overflow-x: auto;
      margin-top: 10px;
      ul {
        display: flex;
        .still-item {
          width: 140px;
          margin-right: 8px;
          flex: none;
          border-radius: 8px;
          position: relative;
          &:last-child {
            margin-right: 0;
          }
          img {
            width: 140px;
            height: 93px;
          }
        }
      }
    }
  }
}
.comment-box {
  // border: 1px solid #0f0;
  margin-top: -14px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  // background-color: #fff;
  /deep/ .van-tabs__wrap {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
  }
  .comment-list {
    background-color: #fff;
    padding: 0 12px;
    .comment-top {
      padding-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .comment-title {
        font-size: 15px;
        color: #333;
      }
      .publish-btn {
        padding: 8px 12px;
        border-radius: 15px;
        background-color: #e4393c;
        color: #fff;
      }
    }
    .comment-item {
      // border: 1px solid red;
      margin-top: 10px;
      // display: flex;
      // justify-content: flex-start;
      // align-items: flex-start;
      .avatar {
        background-color: #ccc;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .right {
      // border: 1px solid #000;
      border-bottom: 1px solid #ddd;
      margin-left: 10px;
      // flex-grow: 1;
      width: 300px;
      padding-bottom: 10px;
      &:last-child {
        border-bottom: none;
      }
      .right-top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .title-container {
          display: flex;
          flex: 1;
          justify-content: center;
          flex-direction: column;
          .name-box {
            display: flex;
            align-items: center;
            .nickName {
              color: #333;
            }
            .level {
              // border: 1px solid #000;
              width: 24px;
              height: 16px;
              margin-left: 8px;
              color: #aaa;
            }
            /deep/ .van-tag {
              text-align: center;
              padding-left: 10px;
            }
          }
        }
        .comment-star {
          display: flex;
          justify-content: start;
          align-items: center;
          flex-direction: row;
          .star-wrap {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .star-score,
            .star-word {
              font-size: 12px;
              color: #faaf00;
            }
            .star-score {
              // transform: scale(0.92);
              padding-top: 4px;
              padding-right: 1px;
              margin-left: 6px;
            }
          }
          .buy-ticket {
            border: 1px solid #4f89b3;
            border-radius: 10px;
            color: #3f89b3;
            text-align: center;
            transform: scale(0.75);
            display: block;
            padding: 0 5px;
          }
        }
        .title-appove {
          border: 1px solid #ccc;
          border-radius: 14px;
          // width: 68px;
          // height: 26px;
          padding: 4px 12px;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          .zan-icon {
            width: 16px;
            height: 16px;
          }
          .zan-num {
            color: #999;
            margin-top: 2px;
            padding-left: 5px;
          }
        }
      }
      .right-middle {
        margin-top: 5px;
        .middle-content {
          font-size: 15px;
          color: #333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 7;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      .right-bottom {
        color: #666;
        margin-top: 10px;
        display: flex;
        align-items: center;
        .reply {
          background-color: #eef1f6;
          color: #5a7cab;
          padding: 2px 6px;
          margin-left: 8px;
          border-radius: 14px;
          span {
            margin-right: 4px;
          }
        }
      }
    }
    .comment-bottom {
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #f03d37;
      font-size: 15px;
    }
  }
}
.bottom {
  // border: 1px solid #000;
  background-color: #fff;
  width: calc(100% - 32px);
  height: 46px;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 8px 16px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  .van-button {
    font-size: 16px;
  }
}
.q-a {
  // border: 1px solid red;
  // height: 300px;
  margin-top: 14px;
  background-color: #fff;
  padding: 0 12px;
  .qa-top {
    // border: 1px solid #000;
    height: 40px;
    border-bottom: 1px solid #ccc;
    .qa-top-title {
      font-size: 15px;
      color: #333;
      line-height: 40px;
    }
    .ask-btn {
      padding: 8px 12px;
      border-radius: 15px;
      background-color: #e4393c;
      color: #fff;
      margin-top: 4px;
    }
  }
  .qa-item {
    border-bottom: 1px solid #ccc;
    padding-top: 12px;
    padding-bottom: 12px;
    .q-conent {
      font-size: 17px;
      color: #333;
      font-weight: bold;
    }
    .ans-num {
      margin-top: 2px;
      color: #666;
    }
    .ans-content {
      font-size: 13px;
      color: #666;
      margin-top: 8px;
    }
  }
  .qa-bottom {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #f03d37;
    font-size: 15px;
  }
}
.detail-box {
  // border: 1px solid #000;
  background-color: #fff;
  margin-top: 14px;
  .detail-info-title {
    height: 40px;
    padding: 0 12px;
    line-height: 40px;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #ccc;
  }
  .detail-items {
    display: flex;
    flex-wrap: wrap;
    .detail-item {
      // border: 1px solid #000;
      width: calc(50% - 36px);
      padding: 15px;
      padding-left: 20px;
      border-right: 1px solid #f0f0f0;
      border-bottom: 1px solid #f0f0f0;

      .item-top {
        display: flex;
        .item-title {
          font-size: 15px;
          color: #333;
        }
        .icon {
          width: 14px;
          height: 14px;
          // border: 1px solid #000;
          margin-top: 4px;
          margin-right: 6px;
        }
      }
      .item-content {
        font-size: 13px;
        color: #666;
        margin-top: 6px;
        margin-left: 18px;
      }
    }
  }
}
.recommend-box {
  margin-top: 14px;

  .news-box {
    background-color: #fff;
    .news-top {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #f5f5f5;
      padding: 0 12px;
      .news-title {
        font-size: 15px;
        color: #333;
      }
      .view-all {
        font-size: 13px;
        color: #666;
      }
    }
    .news-items {
      background-color: #fff;
      // border: 1px solid #000;
    }
    .news-item {
      padding: 12px;
      border-bottom: 1px solid #f0f0f0;
      .news-item-top {
        .news-content {
          // border: 1px solid #000;
          font-size: 17px;
          color: #333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          text-overflow: ellipsis;
          overflow: hidden;
          width: calc(100% - 120px);
        }
        .cover {
          width: 110px;
          height: 78px;
          img {
            height: 78px;
          }
        }
      }
      .news-item-bottom {
        margin-top: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #999;
        .time {
          margin-left: 10px;
        }
        .right {
          // border: 1px solid #000;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .van-icon {
            margin-right: 5px;
          }
          .read {
            margin-right: 34px;
          }
          .comment-num {
            padding-right: 4px;
          }
        }
      }
    }
  }
  .recommend-films {
    margin-top: 14px;
    background-color: #fff;
    padding: 12px;
    .recomment-title {
      font-size: 15px;
      color: #333;
    }
    .recomment-box {
      // border: 1px solid #000;
      margin-top: 10px;
      display: flex;
      overflow-x: auto;
      .recomment-item {
        margin-right: 10px;
        &:last-child {
          margin-right: 0;
        }
      }
      .pic {
        width: 80px;
        height: 112px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        .score {
          color: #ffb400;
          font-weight: bolder;
          font-size: 13px;
          position: absolute;
          left: 6px;
          bottom: 2px;
        }
      }
      .title {
        width: 80px;
        font-size: 14px;
        // color: #333;
        margin-top: 4px;
      }
    }
  }
}
.statement-box {
  height: 60px;
  text-align: center;
  color: #999;
  font-size: 6px;
  line-height: 60px;
  a {
    color: rgb(86, 86, 255);
  }
}
::-webkit-scrollbar {
  display: none;
}

/deep/ .van-rate__icon {
  // border: 1px solid #000;
  font-size: 2px;
  margin-right: 4px;
  transform: scale(0.92);
}
/deep/ .van-share-sheet__options {
  // border: 1px solid #000;
  justify-content: space-around;
}
</style>